<!-- 首页冒泡 -->
<style rel="stylesheet/scss" lang="scss" >
.pro-crm-home-bubble {
  background: #ffffff;
  padding: 20px;
  .bubble-title {
    padding: 5px 0 10px 2px;
    color: #2f6bcf;
    font-size: 14px;
  }
  .bubble-text {
    position: relative;
    padding-right: 68px;

    .el-input input {
      height: 54px;
      line-height: 54px;
      font-size: 14px;
      padding: 0 15px;
      padding-right: 25px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .el-button {
      position: absolute;
      right: 0;
      top: 0;
      padding: 20px;
      font-size: 14px;
      background: #2f6bcf;
      border: 0;
      color: #fff;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
  .bubble-tabs {
    margin-top: 10px;

    .tabs {
      height: 35px;
      line-height: 35px;
      font-size: 14px;
      .tab {
        color: grey;
        cursor: pointer;
        padding: 0 5px;
        position: relative;
      }
      .tab.active {
        color: #2f6bcf;
        background: #fff;
      }
      .tab.active::after {
        position: absolute;
        content: "";
        bottom: -10px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #2f6bcf;
      }
      .more {
        float: right;
        color: #2f6bcf;
        cursor: pointer;
      }
    }
  }
}
</style>
<template>
  <div
    v-loading="loadingRightBot"
    class="pro-crm-home-bubble"
  >
    <div class="bubble-title">
      {{ $t('_bubble.bubbleup') }}
    </div>
    <!-- 发送冒泡 -->
    <div class="bubble-text">
      <el-input
        v-model="message"
        :placeholder="$t('_bubble.sayholder')"
        type="text"
        maxlength="60"
        clearable
      />
      <el-button
        @click="sendMsg()"
        plain
      >
        {{ $t('_bubble.maopao') }}
      </el-button>
    </div>

    <div class="bubble-tabs">
      <!-- 冒泡标签 -->
      <div class="tabs">
        <span
          :class="{active:activeTab == 'new'}"
          @click="setActiveTab('new')"
          class="tab"
        >{{ $t('_bubble.zuixinmaopao') }}</span>
        <span
          :class="{active:activeTab == 'hot'}"
          @click="setActiveTab('hot')"
          class="tab"
        >{{ $t('_bubble.zuiremaopao') }}</span>
        <span
          @click="moreMsg()"
          class="more"
        >{{ $t('more') }}</span>
      </div>
      <!-- 冒泡数据 -->
      <bubble-list
        ref="list"
        :style="{height:minHeight+'px'}"
        :page-size="20"
        :type="activeTab"
        @showInfo="showInfo"
        auto-scroll
        autoload
      />
      <!-- 冒泡详情 -->
      <bubble-info
        ref="info"
        :item="activeInfo"
        :index="activeInfoIndex"
      />
      <!-- 冒泡更多 -->
      <bubble-more
        ref="more"
        @showInfo="showInfo"
      />
    </div>
  </div>
</template>
<script>
import VueI18n from 'vue-i18n';
import BubbleList from './bubble_list.vue';
import BubbleInfo from './bubble_info.vue';
import BubbleMore from './bubble_more.vue';
import getLang from '../../assets/lang/mergeLang';

const i18n = new VueI18n({
  locale: JE.getCookies('je-local-lang') || 'zh_CN', // 语言标识
  messages: {
    zh_CN: getLang('zh', [{ name: '_bubble', data: require('./../../assets/lang/bubble/zh') }]), // 中文语言包
    en: getLang('en', [{ name: '_bubble', data: require('./../../assets/lang/bubble/en') }]), // 英文语言包
  },
});

export default {
  name: 'Bubble',
  components: {
    BubbleList,
    BubbleInfo,
    BubbleMore,
  },
  i18n,
  data() {
    return {
      activeInfo: {},
      activeInfoIndex: 0,
      message: '',
      activeTab: 'new',
      minHeight: 612,
      lang: JE.getCookies('je-local-lang') || 'zh_CN',
    };
  },
  methods: {
    changeHeight(height) {
      const me = this;
      me.$refs.list.$el.style.height = `${height > me.minHeight ? height : me.minHeight}px`;
    },
    sendMsg() {
      this.activeTab = 'new';
      if (JE.isEmpty(this.message.trim())) {
        return JE.msg(`${this.$t('alert.alert1')}~`);
      }
      if (this.message.length > 60) {
        return JE.msg(this.$t('alert.alert2'));
      }
      const obj = JE.ajax({
        url: '/je/portal/homePortal/sendBubbleMsg',
        params: { MPXX_XXNR: this.message },
      });
      if (obj.success) {
        JE.msg(`${this.$t('alert.alert3')}~`);
        this.message = '';
        const { data } = this.$refs.list;
        data.unshift(obj.obj);
        data.splice(data.length - 1, 1);
      }
    },
    setActiveTab(tab) {
      this.activeTab = tab;
    },
    moreMsg() {
      this.$refs.more.show();
    },
    refresh() {
      this.$refs.list.loadPage(1, this.activeTab);
      this.$refs.more && this.$refs.more.getList().loadPage();
    },
    showInfo(info, index) {
      this.$refs.info.show();
      this.activeInfo = info;
      this.activeInfoIndex = index;
    },
  },
};
</script>
